<template>
	<view class="monitoringReport">
		<uv-notify ref="notify" type="error"></uv-notify>
		<uv-form labelPosition="left" :model="formData" :rules="rules" ref="form" labelWidth="100">
			<uv-form-item label="上报类别" prop="reportType" borderBottom @click="showTypeSelect">
				<uv-input v-model="formData.reportType" disabled disabledColor="#ffffff" placeholder="请选择上报类别" border="none">
				</uv-input>
				<template v-slot:right>
					<uv-icon name="arrow-right"></uv-icon>
				</template>
			</uv-form-item>
			<uv-form-item label="报警等级" prop="warningLevel" borderBottom @click="showAlarmLevelSelect">
				<uv-input v-model="formData.warningLevel" disabled disabledColor="#ffffff" placeholder="请选择报警等级" border="none">
				</uv-input>
				<template v-slot:right>
					<uv-icon name="arrow-right"></uv-icon>
				</template>
			</uv-form-item>
			<uv-form-item label="上报位置" prop="reportPosition" borderBottom>
				<uv-input v-model="formData.reportPosition" border="none"></uv-input>
			</uv-form-item>
			<uv-form-item label="上报时间" prop="reportTime" borderBottom>
				<uv-input v-model="formData.reportTime" border="none" disabled></uv-input>
			</uv-form-item>
			<uv-form-item label="故障描述" prop="contentDesc" class="desc_item">
				<uv-textarea v-model="formData.contentDesc" border="bottom"></uv-textarea> 
				<!-- <image class="yysr_icon" src="../../static/index/语音输入.png" mode="scaleToFill" /> -->
			</uv-form-item>
			<!-- <uv-form-item label="设备名称" prop="deviceName" borderBottom>
				<uv-input v-model="formData.deviceName" border="none">
					<template v-slot:suffix>
						<image class="sm_icon" src="../../static/index/扫码.png" mode="scaleToFill" />
					</template>
				</uv-input>
			</uv-form-item>
			<uv-form-item label="设备编号" prop="deviceNum" borderBottom>
				<uv-input v-model="formData.deviceNum" border="none"></uv-input>
			</uv-form-item>
			<uv-form-item label="设备型号" prop="deviceType" borderBottom>
				<uv-input v-model="formData.deviceType" border="none"></uv-input>
			</uv-form-item>
			<uv-form-item label="故障等级" prop="faultLevel" borderBottom>
				<uv-input v-model="formData.faultLevel" border="none">
					<template v-slot:suffix>
						<uv-tags text="严重" type="error"></uv-tags>
					</template>
				</uv-input>
			</uv-form-item> -->
			<uv-form-item label="图片上传" prop="reportPhoto" borderBottom> 
				<u-upload  :fileList="fileList"  @afterRead="afterRead" @delete="deletePic" name="1" multiple :maxCount="10" ></u-upload>
			</uv-form-item>
			<uv-button type="primary" text="提交" customStyle="margin-top: 10px" @click="submit"></uv-button>
		</uv-form>



		<uv-action-sheet class="uv-action-sheet" ref="typeSelect" :actions="typeActions" title="请选择上报类别" @select="typeSelect"></uv-action-sheet>
		<uv-action-sheet class="uv-action-sheet" ref="alarmLevelSelect" :actions="alarmLevelActions" title="请选择报警等级" @select="alarmLevelSelect"></uv-action-sheet>
		<custom-tabBar></custom-tabBar>
	</view>
	
</template>

<script>
import { parseTime } from "@/utils/toolUtil.js";
import { upload,precessStart } from "@/request/index";
	export default {
		data() {
			return {
				definitionId: "Process_1735211094145:1:6026335e-c728-11ef-bf1a-18c04d99de82",
				uploadFileUrl: "http://192.168.1.101:8092/system/oss/upload", 
				formData: {
					reportType: "",
					warningLevel: "",
					reportTime: "",
					reportPhoto: [],
				},
				rules: {
					reportType: {
						required: true, 
						message: '请输入上报类别', 
						trigger: ['change','blur'],
					},
					warningLevel: {
						required: true, 
						message: '请输入报警等级', 
						trigger: ['change','blur'],
					},
					reportPosition: {
						required: true, 
						message: '请输入上报位置', 
						trigger: ['change','blur'],
					},
					reportTime: {
						required: true, 
						message: '请输入上报时间', 
						trigger: ['change','blur'],
					},
					contentDesc: {
						required: true, 
						message: '请输入故障描述', 
						trigger: ['change','blur'],
					},
					// reportPhoto: {
					// 	required: true, 
					// 	message: '请上传照片', 
					// 	trigger: ['change','blur'],
					// },

				}, 
				fileList: [],
				uploadList: [],
				alarmLevelActions: [
					{ name: "一级" },
					{ name: "二级" },
					{ name: "三级" }, 
				],
				typeActions: [
					{ name: "设备故障" },
					{ name: "水情雨情报警" },
					{ name: "非法活动" },
					{ name: "生态卫生异常" },
					{ name: "险情处置" },
				],
				notifyMessage: "",
			}
		},
		onShow() {
			let date = new Date();
			console.log(parseTime(date));
			this.formData.reportTime = parseTime(date);
		},
		methods: {
			typeSelect(e){
				this.formData.reportType = e.name;
			},
			showTypeSelect(){
				this.$refs.typeSelect.open();
				uni.hideKeyboard();
			},  
			alarmLevelSelect(e){
				this.formData.warningLevel = e.name;
			},
			showAlarmLevelSelect(){
				this.$refs.alarmLevelSelect.open();
				uni.hideKeyboard();
			},  
			submit(){
				let _this = this;
				this.$refs['form'].validate().then(res  => {
					console.log("成功")
					precessStart(_this.definitionId, JSON.stringify(this.formData))
						.then( res => {
							_this.$refs.notify.show({
								message: "上报成功！",
								type: "success"
							});
							_this.$refs['form'].clearValidate();
							_this.$refs['form'].resetFields();
							_this.fileList = [];
							_this.formData.reportPhoto = [];
							let date = new Date();
							console.log(parseTime(date));
							this.formData.reportTime = parseTime(date);
							console.log(res);	
						}).catch( err => {
							console.log(err);
						}) 
				}).catch( error => {
					console.log('验证失败');
				});

			},
			deletePic(event) {
				this.fileList.splice(event.index, 1)
			},
			
		
			// 新增图片
			async afterRead(event) {
				let _this = this;
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				console.log(event)
				let lists = [].concat(event.file)
				let fileListLen = this.fileList.length
				lists.map((item) => {
					this.fileList.push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				 const token = uni.getStorageSync('token')
				for (let i = 0; i < lists.length; i++) {
					console.log(lists[i]);
					 let fd = new FormData();
      				fd.append('file', lists[i]);
					uni.uploadFile({
						url: _this.uploadFileUrl, // 仅为示例，非真实的接口地址
						filePath:  lists[i].url,
						name: 'file',
						header: {
							Authorization :'Bearer ' + token,
						},
						success: (result) => {
							let item =  this.fileList[fileListLen]
							console.log(result.data)
							let data = JSON.parse(result.data);
							_this.fileList.splice(fileListLen, 1, Object.assign(item, {
								status: 'success',
								message: '',
								url: data.data.url,
							}))
							fileListLen++
							_this.formData.reportPhoto.push( {
								url: data.data.url,
								ossId: data.data.ossId,
								fileName: data.data.fileName
							})
							console.log(_this.formData)
						}
					});
					
				}
			}, 
		}, 
	}
</script>

<style lang="scss">
.monitoringReport{
	background-color: #fff;
	padding: 0.8rem;
	.sm_icon,.yysr_icon{
		width: 1.6rem;
		height: 1.6rem;
	}
	.desc_item{
		position: relative;
	}
	.yysr_icon{
		position: absolute;
		right: 0;
		bottom: 1rem;
	}

	// .uv-action-sheet /deep/ [name="content"]{
	// 	bottom: 63px !important;
	// }
}
</style>
